import React, { Component } from 'react';     
import { Form,Row,Col,Button,Modal,message,Select,Input } from 'antd';
import '../index.css';
import SelectFileForm2 from '../../../components/Modal/select-file-form2';
// import SelectCurveUpForm from '../../Modal/select-curvesUp-form';
import {reqAllMb,reqProcessMbData,reqProcessDocDataList} from '../../../api';
import { connect } from 'react-redux';
import {initDaosDataList1,initdocData,initmbData,changeTag, setCurve,getDaosMb2,setMbInReducer,setEditDepthData2,getCurvesIntoDao2,setDocInReducer,getDaosMb1,setEditDepthData1,getCurvesIntoDao1} from '../../../redux/actions';



import {DaosListDemo2} from '../../../config/daosList';
const docDatasList1 = DaosListDemo2;
const docDatasList2 = JSON.parse(JSON.stringify(DaosListDemo2));

const { Option } = Select;


class ThreedimshowSider extends Component {
  
  state = {
    docInfo: '',    
    visible: '0',
    mb_id:'',  // 选中模板id
    mbList:[],   // 所有模板列表
    curves_mb:[],  // 获取模板内容
    curve_list:[],  //文件内所有曲线名称
    
     
                docId: '',   // 存储文件id
                curves_mb: [],
                colorBoxNums:'5',
                background1: 'red',
                background2: 'orange',
                background3: 'yellow',
                background4: 'green',
                background5: 'blue', 
                
  };

  getAllMb = async() => {
    const result = await reqAllMb();
    //console.log("mb11",result);
    if(result.code === 200){
      const mbList = result.data;
      this.setState({
        mbList
      })
    }  
  }
  
  getMb = (values) => {  // 选择模板进行state保存
    
    this.setState({
      mb_id: values
    })
  }
  getCurveList1=(values)=>{
    this.props.setCurve(values);

  }
 
  handleMb = async() => {    // 添加模板 响应函数     
    this.setState({  visible: '0' });
    const mb_id = this.formRef.current.getFieldValue('mb_id'); 
    const result = await reqProcessMbData(mb_id);  
    console.log("获取模板",result) 
    if(result.code === 200){
      const curves_mb = result.data;  
      this.setState({
        curves_mb
      })
      this.props.getDaosMb1(curves_mb);   // 将道模板先加载到页面中
      this.props.setMbInReducer(result.data);  // 保存当前模板(完整的) :  result.data
      this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
    }else{
      message.error("模板获取失败！");
    }  
  }; 

  handleMb = async() => {    // 添加模板 响应函数  
    this.setState({  visible: '0' });
    const mb_id = this.state.mb_id; 
    const result = await reqProcessMbData(mb_id);  
    console.log("获取模板",result);
    if(result.code === 200){
      const curves_mb = result.data;
      this.setState({curves_mb},() => console.log("模板名称：",mb_id,curves_mb)) 
      this.props.getDaosMb1(curves_mb);   // 将道模板先加载到页面中
      this.props.setMbInReducer(result.data);  // 保存当前模板(完整的) :  result.data
    }else{
      message.error("模板获取失败！");
    }   
  };  
  
  openFileShow1 = () => {    // 选择文件弹框显示
    this.setState({
      visible: '1'
    });
  };
  handleChange=(value)=>{  // 修改横切、纵切面选项
    this.setState({curveType1:value});
  }
  handleOpenFile = async() => {    // 添加数据文件 响应函数      
    this.setState({ visible: '0'});
    var docInfo;
    const doc_id = this.formRef.current.getFieldValue('doc_id');
    this.docList.map((item) => {
      if(item.doc_id === doc_id){
        docInfo = item
      }
    });
    this.setState({
      docInfo
    });
    const doc_type = docInfo.doc_type;
    const drill_id = docInfo.drill_id;
    const org_id = docInfo.org_id;
    const ws_id = docInfo.ws_id;
    //console.log("选择文件成功",doc_id,docInfo);
    if(doc_type === "纯数据文件"){
      const result = await reqProcessDocDataList(doc_id,doc_type,drill_id,org_id,ws_id);  // 根据文件id获取 数据文件
      //console.log("获取纯数据文件result：",result);
      if(result.code === 200){
        const docDatasList = result.data;
        this.props.setDocInReducer(docDatasList);
        if(docDatasList.rock_curve){
          docDatasList.curves.push(docDatasList.rock_curve);    // 将岩性曲线 推入 曲线数组中
        }
        console.log("所有的曲线1：",docDatasList.curves);
        let curveArr=new Array();
        docDatasList.curves.map((item)=>{
          if(item.curve_name!=='岩性'){ curveArr.push(item);}
        })
        this.setState({
          curve_list:curveArr
        })

        // const checkOnLeaf = {key: docInfo.doc_id, title: docInfo.title, type: docDatasList.doc_type, curves: docDatasList.curves};
        // const docStartDepth = docDatasList.start_depth;  //文件起深
        // const docEndDepth = docDatasList.end_depth;      // 文件终深
        // const docInterval = docDatasList.interval;       // 深度间隔
        // this.props.setEditDepthData1(Number(docStartDepth),Number(docEndDepth),Number(docInterval));   // 读取文件的 起深、终深、深度间隔，并更新
        // if(checkOnLeaf.curves){
        //   if(this.state.curves_mb.length != 0){  // 用户在选择文件之前已经导入模板
        //     const data = checkOnLeaf.curves;
        //     this.props.getCurvesIntoDao1(data);  // 将 纯数据曲线 传入模板中  vvvvvvvvv
        //     this.props.setDocInReducer(docDatasList);  // 将文件保存到reducer  vvvvvvvv
        //     //this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
        //     setDocDataList(docDatasList);  // 将获取到的 文件数据 放入内存  
        //   }else{  // 用户没有选择模板
        //     if(this.props.defaultmbData.mb_id){  // 有默认模板,则自动导入默认模板
        //       const mbData = this.props.defaultmbData;
        //       const data = checkOnLeaf.curves;
        //       this.props.getDaosMb1(mbData);   // 将 默认模板 载入
        //       this.props.getCurvesIntoDao1(data);  // 将 纯数据曲线 传入模板中  vvvvvvvvv
        //       this.props.setDocInReducer(docDatasList);  // 将文件保存到reducer  vvvvvvvv
        //       this.props.setMbInReducer(mbData);  // 保存当前模板(完整的)
        //       //this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
        //       setDocDataList(docDatasList);  // 将获取到的 文件数据 放入内存
        //     }else{
        //       message.error("请先选择模板或设置默认模板！");
        //     }
        //   }
        // }
      }else{
        message.error("数据获取异常！");
      }  
    }else if(docInfo.doc_type === "绘图文件"){   
      const result = await reqProcessDocDataList(doc_id,doc_type,drill_id,org_id,ws_id);  // 根据文件id获取 绘图文件
      console.log("绘图文件",result)
      if(result.code === 200){
        const docDatasList = result.data;
        let curveArr=new Array();
        docDatasList.docData.curves.map((item)=>{
          if(item.curve_name!=='岩性'){ curveArr.push(item);}
        })
        this.setState({
          curve_list:curveArr
        })
        // docDatasList.docData.curves.push(docDatasList.docData.rock_curve);   // 将岩性曲线 放入 曲线数组中
        // const checkOnLeaf = {key: docInfo.doc_id, title: docInfo.title, type: docDatasList.doc_type, curves: docDatasList.docData.curves};
        // const docStartDepth = docDatasList.docData.start_depth;  //文件起深
        // const docEndDepth = docDatasList.docData.end_depth;      // 文件终深
        // const docInterval = docDatasList.docData.interval;       // 深度间隔
        // this.props.setEditDepthData1(Number(docStartDepth),Number(docEndDepth),Number(docInterval));   // 读取文件的 起深、终深、深度间隔，并更新
        // if(checkOnLeaf.curves){
        //   if(this.state.curves_mb.length === 0){  // 没有导入模板     
        //     //1、导入模板mbData
        //     const mbData = docDatasList.mbData;
        //     this.props.getDaosMb1(mbData);   // 将 绘图文件 的 模板部分 先载入
        //     //2、导入数据docData
        //     const docData = docDatasList.docData;
        //     this.props.getCurvesIntoDao1(docData.curves);    // 将 绘图文件 的 纯数据部分 载入  vvvvvvvv
        //     this.props.setDocInReducer(docDatasList);  // 将绘图文件保存到reducer  vvvvvvvvvvvv
        //     this.props.setMbInReducer(mbData);  // 保存当前模板(完整的)
        //     //this.props.isUpdatePages(!this.props.updatePages);  // 及时更新页面(导入模板页面)
        //     setDocDataList(docDatasList);  // 将获取到的 绘图文件数据 放入内存
        //     //console.log("绘图文件",mbData,docData)
        // }else{
        //   message.error("请勿导入模板！");
        // }
        //}
      }else{
        message.error("数据获取异常！");
      }
    }
    let Tag='res';
    this.props.changeTag(Tag);
  }; 
 
  
  handleCancel = () => {    // 对话框取消按钮
    this.setState({
      visible: '0'
    }); 
  };
  componentWillMount(){
    this.getAllMb();
  }

  formRef1 = React.createRef();    
  formRef3 = React.createRef(); 
  

  componentWillUpdate(nextProps){
    // if(this.props.isDoNull != nextProps.isDoNull){   // 清空
    //   this.formRef1.current.resetFields();
    //   this.formRef3.current.resetFields();
    //   document.getElementById('input1').innerHTML = ' ';
      
    // }
  }
  // componentWillUnmount(){    // 换页的时候会被调用
  //   //console.log("即将被卸载！");
  //   removeDocDataList();  // 清空 内存中的文件
  //   removeDepthData();  // 清空 内存中的 初始深度
  //   this.props.initDaosDataList1([]);  // 清空 reducer中的 模板数据
  //   this.props.initdocData({});  // 清空 reducer中的 文件
  //   this.props.initmbData([]);   // 清空 reducer中的 模板
  // }


  render() {
    const { visible,docInfo,mbList,curve_list,background1,background2,background3,background4,background5,color1,color11,color2,curveType} = this.state;
    return (
      <div className='data-comparison-sider-wrapper'>
        
        {/* <Row>
          <Col>模&nbsp;&nbsp;&nbsp;&nbsp;版：</Col>
          <Col span={12}>
          <Form ref={this.formRef1}  >
            <Form.Item 
              name='mb' 
            >
              <Select 
                style={{ width: 127 }} 
                placeholder="请选择" 
                getPopupContainer={triggerNode => triggerNode.parentNode}
                onSelect={this.getMb}
              >  
                {mbList.map((item) => <Option value={item.mb_id}>{item.mb_name}</Option>)}
              </Select>
            </Form.Item> 
            </Form>
          </Col>
          <Col>
            <Form.Item>
              <Button className="data-pre-process-button"  type="primary" onClick={this.handleMb}>
                确定
              </Button>
            </Form.Item>
          </Col>
        </Row> */}
        <Row>
          <Col style={{ width: 70, lineHeight: '32px' }}>文&nbsp;件&nbsp;：</Col>
          <Col>
          {/* <Form ref={this.formRef2}  >
            <Form.Item 
              name='file1' 
            >
              {console.log("文件",docInfo.title)}
              <Input className="data-pre-process-input" id="input1" value={docInfo.title} style={{width:'112px',height:'28px'}} readonly />
            </Form.Item> 
            </Form> */}
            <div className="data-pre-process-input" id="input1" >{docInfo.title}</div>
          </Col>
          <Col>
            <Form.Item>
              <Button className="data-pre-process-button"  type="primary" onClick={this.openFileShow1}>
                选择
              </Button>
            </Form.Item>
          </Col>
        </Row>
        <Row>
          <Col style={{ width: 70, lineHeight: '32px' }}>曲线：</Col>
          <Col>
          <Form ref={this.formRef3}  >
            <Form.Item 
              name='mb' 
            >
              <Select 
              style={{width:186}}
                placeholder="请选择" 
                getPopupContainer={triggerNode => triggerNode.parentNode}
                onSelect={this.getCurveList1}
              >  
                {curve_list.map((item) => <Option value={item.curve_id}>{item.curve_name}</Option>)}
              </Select>
            </Form.Item> 
            </Form>
          </Col>
        </Row>
        <Row>
          <Col style={{ width: 70, lineHeight: '32px' }}>X：</Col>
          <Col>
          <Form>
            <Form.Item 
            >
              <Input placeholder="请输入X轴坐标" className='data-show-input'/>
            </Form.Item> 
            </Form>
          </Col>
        </Row>
        <Row>
          <Col style={{ width: 70, lineHeight: '32px' }}>Y：</Col>
          <Col>
          <Form>
            <Form.Item 
            >
              <Input placeholder="请输入Y轴坐标" className='data-show-input'/>
            </Form.Item> 
            </Form>
          </Col>
        </Row>
        <Row>
          <Col style={{ width: 70, lineHeight: '32px' }}>Z：</Col>
          <Col>
          <Form>
            <Form.Item 
            >
               <Input placeholder="请输入Z轴坐标" className='data-show-input'/>
            </Form.Item> 
            </Form>
          </Col>
        </Row>
           <Modal
              title="选择数据文件"
              visible={visible === '1'}
              onOk={this.handleOpenFile}
              onCancel={this.handleCancel}
              destroyOnClose={true}  // 关闭时销毁子元素
              okText="确定"
              cancelText="取消"
            >
              <SelectFileForm2 
                setForm = {(formRef) => {this.formRef = formRef}}
                setDocList = {(docList) => {this.docList = docList}}  
              /> 
            </Modal>

    </div>
    );
  }
}


export default  connect(
  state => ({  docData: state.docData, updatePages: state.updatePages,daosDataList1: state.daosDataList1,selectedCurveShow1: state.selectedCurveShow1, defaultmbData: state.defaultmbData, isDoNull: state.isDoNull}),
  {initDaosDataList1,initdocData,initmbData,changeTag,setCurve,getDaosMb2,setMbInReducer,setEditDepthData2,getCurvesIntoDao2,setDocInReducer,getDaosMb1,setEditDepthData1,getCurvesIntoDao1}    //replaceNewCurves,isUpdatePages,
)(ThreedimshowSider);












 
